<template>
    <div class="bg-white">
    <!-- 外层滚动容器 -->
    <div class="h-screen overflow-y-auto bg-gray-50">
        <!-- 顶部导航 固定 -->
        <div class="sticky top-0 z-10">
        <header class="bg-primary text-white py-4 px-6 text-center text-xl font-bold shadow-md">
            在线支付
        </header>
        </div>
    <div class="flex flex-col p-2">
        <!-- 订单信息 -->
        <h2 class="text-gray-500 text-xl sm:text-2xl md:text-3xl opacity-90">订单信息:</h2>
        <div class="flex justify-between items-center">
          <!-- 商家名称 -->
          <div class="flex items-center gap-3 cursor-pointer" @click="toggleOrderDetails">
              <h2 class="text-lg font-semibold text-gray-800">万家饺子（软件园E18店）</h2>
              <font-awesome-icon 
                  :icon="['fas', 'chevron-down']" 
                  :class="{ 'transform rotate-180': showOrderDetails }"
                  class="transition-transform duration-200"
              />   
          </div>
          <!-- 订单总价 -->
          <span class="justify-end text-xl text-#ff4500 justify-end">¥{{ totalPrice + deliveryFee }}</span>
        </div>

        <!-- 商品列表和配送费 - 可折叠-->
        <div v-show="showOrderDetails">
            <!-- 商品列表 -->
            <div v-for="(dish, index) in selectedDishes" :key="index" 
                class="flex justify-between text-base text-gray-600 py-1 border-b last:border-b-0">
                <span>{{ dish.name }} ×{{ dish.count }}</span>
                <span>¥{{ dish.price * dish.count }}</span>
            </div>
            
            <!-- 配送费 -->
            <div class="flex justify-between text-base text-gray-600 py-2 border-b last:border-b-0">
                <span>配送费</span>
                <span>¥{{ deliveryFee }}</span>
            </div>
        </div>
  
        <!-- 支付方式 -->
        <h3 class="text-lg font-semibold text-gray-800 mb-4">支付方式</h3>
        
        <!-- 支付宝支付选项 -->
        <div class="flex items-center justify-between p-3 mb-2 border rounded-lg"
            :class="{ 'border-primary': paymentMethod === 'alipay' }"
            @click="paymentMethod = 'alipay'">
            <div class="flex items-center">
            <img src="@/assets/images/alipay.png" class="w-25 h-6 mr-2">
            </div>
            <input
            type="radio"
            id="alipay"
            v-model="paymentMethod"
            value="alipay"
            class="w-4 h-4 text-primary focus:ring-primary"
            />
        </div>
        
        <!-- 微信支付选项 -->
        <div class="flex items-center justify-between p-3 border rounded-lg"
            :class="{ 'border-primary': paymentMethod === 'wechatpay' }"
            @click="paymentMethod = 'wechatpay'">
            <div class="flex items-center">
            <img src="@/assets/images/wechat.png" class="w-25 h-6 mr-2">
            </div>
            <input
            type="radio"
            id="wechatpay"
            v-model="paymentMethod"
            value="wechatpay"
            class="w-4 h-4 text-primary focus:ring-primary"
            />
        </div>
        
        </div>

        <!-- 支付按钮 -->
        <div class="px-4 mb-20">
        <button
            @click="handlePayment"
            class="w-full h-10 bg-green-500 text-white border-0 py-3 rounded-lg font-bold text-lg shadow-lg hover:bg-green-600 transition-colors duration-300"
        >
            确认支付 ¥{{ totalPrice + deliveryFee }}
        </button>
        </div>
      </div>
        <Footer class="fixed bottom-0 w-full" />
    </div>
</template>

<script setup>
  import { ref, onMounted } from 'vue';
  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
  import Footer from '@/components/Footer.vue';
  import { useRoute } from 'vue-router';

  const route = useRoute();
  const selectedDishes = ref([]);
  const totalPrice = ref(0);
  const deliveryFee = ref(3);

  // 支付方式
  const paymentMethod = ref('alipay');
  
  // 控制订单详情显示状态
  const showOrderDetails = ref(true);
  
  // 切换订单详情显示状态
  const toggleOrderDetails = () => {
    showOrderDetails.value = !showOrderDetails.value;
  };

  // 处理支付逻辑
  const handlePayment = () => {
    if (paymentMethod.value) {
      alert(`您已选择 ${paymentMethod.value} 支付，支付金额为 ¥${totalPrice.value + deliveryFee.value}。`);
      // 实际的支付接口调用逻辑
    } else {
      alert('请选择支付方式');
    }
  };

  onMounted(() => {
    if (route.query.selectedDishes) {
      selectedDishes.value = JSON.parse(route.query.selectedDishes);
    }
    if (route.query.totalPrice) {
      totalPrice.value = parseFloat(route.query.totalPrice);
    }
  });
</script>

<style scoped>
.bg-primary {
  background-color: #0097FF;
}
</style>